<template>
  <el-container>
    <el-main class="selectMain" v-if="Loaded">
      <el-row class="description">
        <el-col :span="4" class="desc_item">课程编号</el-col>
        <el-col :span="4" class="desc_item">课程名</el-col>
        <el-col :span="4" class="desc_item">学分</el-col>
        <el-col :span="4" class="desc_item">教师名</el-col>
        <el-col :span="4" class="desc_item">地点</el-col>
        <el-col :span="4" class="desc_item">操作</el-col>
      </el-row>
      <class-item v-for="it in classArray.list" :key="it" :class-item="it" @chooseCls="chooseClass"></class-item>
    </el-main>
    <el-dialog v-model="dialogShow" width="500px" center>
      <template #title>
        <span class="warnTitle">
          <svg t="1633071243011" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2576" width="32" height="32"><path d="M512 128c-213.589333 0-384 170.410667-384 384s170.410667 384 384 384 384-170.410667 384-384-170.410667-384-384-384z m-36.949333 150.229333c10.069333-10.069333 18.688-16.768 35.029333-16.768 18.261333-1.450667 35.029333 7.168 41.770667 20.138667 7.68 9.130667 11.989333 29.269333 10.069333 41.301333 0 3.328-2.389333 25.898667-3.370667 32.128l-13.44 170.410667c0 16.810667-3.370667 33.578667-10.069333 46.549333-3.370667 10.069333-13.44 16.810667-26.88 16.810667a25.258667 25.258667 0 0 1-23.509333-16.810667c-6.741333-16.810667-10.069333-30.250667-10.069334-46.549333L465.450667 358.4c-3.370667-30.250667-3.370667-20.181333-3.370667-36.949333 0-16.341333 3.370667-29.781333 12.970667-43.221334z m73.898666 470.912a48.128 48.128 0 0 1-33.578666 13.397334c-13.44 0-26.88-3.328-36.992-13.397334a55.338667 55.338667 0 0 1-16.768-39.850666c0-13.44 3.370667-26.88 13.44-36.949334 10.069333-10.112 23.509333-16.810667 36.949333-16.810666 13.44 0 26.88 6.698667 36.949333 16.768 10.069333 10.112 13.44 23.552 13.44 36.992-0.469333 16.298667-3.84 29.738667-13.44 39.850666z" p-id="2577" fill="#606266"></path></svg>
        &nbsp;退选警告
        </span>
        </template>
      <span style="font-size: 18px;color: #303133;width: 100%;display: flex;align-items: center;justify-content: center;">您确定要退选该课吗？</span>
      <template #footer>
        <div style="width: 100%;display: flex;align-items: center;justify-content: center;">
          <el-button class="baseBtn confirm" @click="delClass">确认</el-button>
          <el-button class="baseBtn cancel" @click="dialogShow = false">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import { ref, watch, onMounted, inject } from 'vue'
import { ElMessage } from 'element-plus/lib'
import getSelectClasses from '@/assets/PublicFunction/AxiosFunctions/chooseClass/getSelectClasses'
import classItem from '@/components/studentPage/chooseClass/deleteClass/classItem.vue'
import deleteClass from '@/assets/PublicFunction/AxiosFunctions/chooseClass/deleteClass'
export default {
  name: 'deleteClass',
  components: {
    classItem
  },
  setup (props: any) {
    const Store = useStore()
    const Loaded = ref(false)
    const classArray = ref(new Array<any>())
    const dialogShow = ref(false)
    const idElem = ref()
    var freshList: any
    freshList = inject('freshList')
    setInterval(() => {
      if (freshList.value) {
        getSelectClasses(Store.getters['CurrentAccount/getCurrentAccount'], (resp: any) => {
          classArray.value = resp.data
          freshList.value = false
        })
        console.log('freshed!')
      }
    }, 300)
    getSelectClasses(Store.getters['CurrentAccount/getCurrentAccount'], (resp: any) => {
      classArray.value = resp.data
      Loaded.value = true
      console.log(classArray.value)
    })
    const Cno = ref('')
    function chooseClass (cno: string, tno: string) {
      Cno.value = cno
      dialogShow.value = true
    }
    function delClass () {
      console.log(Cno.value)
      deleteClass(
        {
          username: Store.getters['CurrentAccount/getCurrentAccount'],
          cno: Cno.value
        }, (resp: any) => {
          getSelectClasses(Store.getters['CurrentAccount/getCurrentAccount'], (resp: any) => {
            ElMessage.success('已成功退课！')
            classArray.value = resp.data
            Loaded.value = true
            dialogShow.value = false
            console.log(classArray.value)
          })
        }, (resp: any) => { console.log(resp) })
    }
    return {
      classArray, Loaded, chooseClass, dialogShow, delClass, idElem
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../assets/Fonts/FontMap/FontMap";
  @import "../../../assets/Fonts/FontMap/FontList.css";
  .selectMain{
    padding: 0;
  }
  .description{
    width: 100%;
    height: 30px;
    background-color: #409EFF;
    border-top: 1px solid #DCDFE6;
    .desc_item{
      font-family: $Mi_Lan;
      height: 100%;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      border-right: 1px solid #DCDFE6;
      font-weight: bold;
      font-size: 16px;
    }
  }
  .warnTitle{
    font-family: $SH_Serif_Regular;
    font-weight: bold;
    color: #606266;
    font-size: 24px;
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
    line-height: 0;
  }
  .baseBtn{
    width: 150px;
    height: 40px;
    border-radius: 0;
  }
  .confirm{
    font-family: $SH_Serif_Regular;
    font-size: 16px;
    background-color: rgb(253, 246, 236);
    border: 1px solid #E6A23C;
    color: #E6A23C;
  }
</style>
